<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>应用编辑</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 20px 0px;
            background: #fff;
        }

        .Modular>div {
            width: 80% !important;
            margin: auto;
        }

        .m {
            width: 80%;
            height: 540px;
            margin: auto;
            margin-top: 20px;
        }

        .m_cover {
            display: inline-block;
            width: 73%;
            position: relative;
        }

        .screenshot {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 9;
        }

        .m_cover img {
            width: 100%;
        }

        .m_edit {
            width: 25%;
            background: #fff;
            float: right;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
        }

        .m_author {
            width: 73%;
            height: 185px;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_dec {
            width: 73%;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            margin-top: 20px;
        }

        .m_edit .layui-tab {
            margin: 5px 0px;
        }

        .m_edit .layui-this:after {
            border-bottom: 0px !important;
        }

        .m_edit .layui-tab-title {
            border-bottom-style: none;
        }

        .m_edit .layui-tab-title li {
            background: #e8e8e8;
            width: 47%;
            box-sizing: border-box;
            margin-left: 2%;
            border-radius: 4px;
        }

        .m_edit .layui-this {
            background: #1E9FFF !important;
            color: #fff !important;
        }

        .m_c,
        .m_edit_btn {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        .m_c {
            height: 195px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .m_c img {
            width: 100%;
            height: 100%;
            opacity: .6;
        }

        .m_edit_btn button {
            width: 30%;
        }

        .m_title {
            line-height: 40px;
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            height: 40px;
            text-indent: 2px;
        }

        .m_edit .layui-textarea {
            min-height: 150px;
        }

        .m_edit_btn {
            padding: 15px;
        }

        .m_name {
            font-size: 20px;
            font-weight: bold;
            width: 50%;
            height: 60px;
            line-height: 60px;
            text-indent: 20px;
        }

        .m_data {
            width: 50%;
            float: right;
            height: 60px;
        }

        .m_data>div {
            float: right;
            margin-right: 30px;
            font-size: 16px;
            font-weight: bold;
            height: 60%;
            line-height: 60px;
        }

        .m_author_photo {
            width: 70px;
            height: 70px;
            float: left;
            margin-left: 20px;
        }

        .m_author_photo img {
            width: 100%;
            border-radius: 100%;
        }

        .m_author_name {
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }

        .m_author_name p {
            font-size: 16px;
            margin-top: 20px;
            color: #868686;
            font-weight: bold;
        }

        .m_dec .layui-this {
            color: #1E9FFF !important;
            font-weight: bold;
            font-size: 16px;
        }

        .m_dec .layui-this:after {
            border-color: #1E9FFF !important;
        }

        .m_dec_con {
            width: 100%;
            padding: 20px 0px;
            border-bottom: 1px #ccc solid;
        }

        .m_dec_type {
            width: 100%;
            padding: 20px 0px;
        }

        .m_dec_type>div {
            margin-bottom: 10px;
        }

        .m_dec .layui-tab-content {
            margin-left: 10px;
        }

        .l_title {
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }

        .m_c_upload {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: -20px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 25px;
            background: #1E9FFF;
            color: #fff;
        }

        .logo {
            width: 200px;
            height: 40px;
            border: 1px #ccc solid;
        }

        #m_cover_app {
            width: 100%;
            height: 600px;
            position: relative;
        }

        #m_cover_app i {
            position: absolute;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            font-size: 25px;
        }

        .totalOut {
            display: none;
        }

        .m_dec_title {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0px;
        }
    </style>
</head>

<body style="width: 100%;padding: 0px; background-color: #eaeaea;">

    <div class="m">
        <div class="m_cover">
            <!--截屏按钮-->
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal screenshot"><i
                    class="layui-icon ">&#xe65d;</i> 保存封面
            </button>
            <div id="m_cover_app">
                <iframe frameborder="none" width="100%" height="100%" id="cesiumIfm"></iframe>
                <!--全屏-->
                <i class="layui-icon totalIn">&#xe622;</i>
                <i class="layui-icon totalOut">&#xe758;</i>
            </div>
        </div>

        <div class="m_edit layui-form">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>应用编辑</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="m_title">名称</div>
                        <input type="text" name="title" placeholder="请输入模板名称" autocomplete="off"
                            class="layui-input name">
                        <div class="m_title">描述</div>
                        <textarea type="text" name="title" placeholder="请输入模板描述" autocomplete="off"
                            class="layui-textarea desc"></textarea>
                        <div class="m_title">分类</div>
                        <select name="city" lay-verify="">
                            <option value="010">北京</option>
                            <option value="0571" selected>杭州</option>
                        </select>
                        <div class="m_title">封面</div>
                        <div class="m_c">
                            <img>
                            <div class="m_c_upload"><i class="layui-icon">&#xe61f;</i>上传封面</div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label key="name" class="m_title">名称</label>
                            <input type="text" name="title" placeholder="请输入模板名称" autocomplete="off"
                                class="layui-input mod_title">
                        </div>
                        <div class="layui-form-item">
                            <label name="gnmb" class="m_title">功能模板</label>
                            <div class="layui-row layui-form" lay-filter="funcMouldForm">
                                <div class="layui-col-md4">
                                    <select name="funcMould" lay-filter="funcMould">
                                        <option value="0" selected>公开</option>
                                        <option value="1">私有</option>
                                    </select>
                                </div>
                                <div class="layui-col-md6 layui-col-md-offset2">
                                    <select name="funcdata" lay-filter="funcdata">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label name="gcmb" class="m_title">工程模板</label>
                            <div class="layui-row layui-form" lay-filter="enginMouldForm">
                                <div class="layui-col-md4">
                                    <select name="enginMould" lay-filter="enginMould">
                                        <option value="0" selected>公开</option>
                                        <option value="1">私有</option>
                                    </select>
                                </div>
                                <div class="layui-col-md6 layui-col-md-offset2">
                                    <select name="engindata" lay-filter="engindata">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="m_title">LOGO</div>
                            <div class="m_logo">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="logoUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img class="logo">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m_edit_btn">
                    <button type="button" class="layui-btn layui-btn-normal">重置</button>
                    <button type="button" class="layui-btn layui-btn-normal release">发布</button>
                    <button type="button" class="layui-btn layui-btn-normal save">保存</button>
                </div>
            </div>
        </div>
        <div class="m_author">
            <div class="m_name">-----</div>
            <div class="m_author_photo">
                <img src="../../static/IMG/Mould/m_author.png">
            </div>
            <div class="m_author_name">
                <p></p>
            </div>
        </div>
        <div class="m_cover"
            style=" background: #fff; box-shadow: 3px 6px 11px 0 #d4d4d4;margin-top: 20px; padding-left: 20px;box-sizing: border-box">
            <div class="m_dec_title">作品描述</div>
            <div class="m_dec_con">-----</div>
            <div class="m_dec_type">
                <div>
                    发布时间：<span class="m_dec_time">2020/01/02</span>
                </div>
                <div>
                    数据类型：<span>应用/演示应用</span>
                </div>
            </div>
        </div>
    </div>


    <script src="../../JS/jquery-2.0.3.js"></script>
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script>
        var $cesuimWin = $('#cesiumIfm')[0].contentWindow;
        layui.use(['element', 'form', 'upload'], function () {
            var element = layui.element,
                form = layui.form,
                upload = layui.upload;
            upload.render({
                elem: '#logoUpload' //绑定元素
                , url: parent.defaultUrl + '/file/imgs' //上传接口
                , done: function (res) {
                    if (res.code === 200) {
                        $('#logoUpload').siblings('.logo').attr('src', res.data);
                        layer.msg('上传成功')
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                }
                , error: function () {
                    //请求异常回调
                }
            });

            //获取功能模板
            form.on('select(funcMould)', function (data) {
                //调用接口
                var params = {
                    "condition": {
                        "openness": parseInt(data.value),
                        "userid": parent.getLocalStorage('JSXM').id,
                        "groupid": 0,
                        'status': 1,
                        'type': '1'
                    },
                    "ispage": false,
                };
                parent.ajaxPost(parent.defaultUrl + '/template/selAllTemplateByUser', params, function (data) {
                    $('select[name=funcdata]').html('<option value="0">请选择</option>');
                    if (data.code === 200) {
                        for (var i = 0, l = data.data.length; i < l; i++) {
                            $('select[name=funcdata]').append(new Option(data.data[i].name, data.data[i].id));
                        }
                        form.render('select', 'funcMouldForm');
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
            })

            //获取工程模板
            form.on('select(enginMould)', function (data) {
                //调用接口
                var params = {
                    "condition": {
                        "openness": parseInt(data.value),
                        "userid": parent.getLocalStorage('JSXM').id,
                        "groupid": 0,
                        'status': 1,
                        'type': '0'
                    },
                    "ispage": false,
                };
                parent.ajaxPost(parent.defaultUrl + '/template/selAllTemplateByUser', params, function (data) {
                    $('select[name=engindata]').html('<option value="0">请选择</option>');
                    if (data.code === 200) {
                        for (var i = 0, l = data.data.length; i < l; i++) {
                            $('select[name=engindata]').append(new Option(data.data[i].name, data.data[i].id));
                        }
                        form.render('select', 'enginMouldForm');
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
            });
            //功能模板选择
            form.on('select(funcdata)', function (data) {
                if (data.value === '0') return;
                //调用接口
                getFuncData(parseInt(data.value))
            });
            //工程模板选择
            form.on('select(engindata)', function (data) {
                if (data.value === '0') return;
                //调用接口
                getEnginData(parseInt(data.value))
            });

            $("#cesiumIfm").load(function () {
                if (id) {
                    parent.ajaxGet(parent.defaultUrl + '/app/selAppById', { 'id': id }, function (data) {
                        if (data.code === 200 && data.data) {
                            $('.name').val(data.data.name);
                            $('.m_name').text(data.data.name);
                            $('.m_dec_con').text(data.data.desc);
                            $('.m_dec_time').text(data.data.time);
                            $('.desc').val(data.data.desc);
                            $('.m_c img').attr('src', data.data.img || '../../static/IMG/nothumb.png');
                            $('.mod_title').val(data.data.title);
                            $('.logo').attr('src', data.data.logo);
                            //调用接口获取工程模板和功能模板
                            if (data.data.projectTemplateId) {
                                getEnginData(data.data.projectTemplateId)
                            }
                            if (data.data.menuTemplateId) {
                                getFuncData(data.data.menuTemplateId)
                            }

                        }
                    });
                } else {
                    //功能模板，工程模板默认选择公开的数据
                    parent.ajaxPost(parent.defaultUrl + '/template/selAllTemplateByUser', {
                        "condition": {
                            "openness": 0,
                            "userid": parent.getLocalStorage('JSXM').id,
                            "groupid": 0,
                            'status': 1,
                            'type': '1'
                        },
                        "ispage": false,
                    }, function (data) {
                        $('select[name=funcdata]').html('<option value="0">请选择</option>');
                        if (data.code === 200) {
                            for (var i = 0, l = data.data.length; i < l; i++) {
                                $('select[name=funcdata]').append(new Option(data.data[i].name, data.data[i].id));
                            }
                            form.render('select', 'funcMouldForm');
                        } else if (data.message) {
                            layer.msg(data.message)
                        }
                    })
                    parent.ajaxPost(parent.defaultUrl + '/template/selAllTemplateByUser', {
                        "condition": {
                            "openness": 0,
                            "userid": parent.getLocalStorage('JSXM').id,
                            "groupid": 0,
                            'status': 1,
                            'type': '0'
                        },
                        "ispage": false
                    }, function (data) {
                        $('select[name=engindata]').html('<option value="0">请选择</option>');
                        if (data.code === 200) {
                            for (var i = 0, l = data.data.length; i < l; i++) {
                                $('select[name=engindata]').append(new Option(data.data[i].name, data.data[i].id));
                            }
                            form.render('select', 'enginMouldForm');
                        } else if (data.message) {
                            layer.msg(data.message)
                        }
                    })
                }
            })
            $('#cesiumIfm').attr('src', '../../Cesium/index.html')
        })

        //获取数据id并调用接口(如果存在id则是编辑页面，无id则是新增页面)
        var id = parseInt(parent.getUrlParam(window.location.search, 'id'));
        $(function () {
            //描述
            $('.m_edit').on('input propertychange', '.desc', function () {
                $('.m_dec_con').text($(this).val())
            })

            //应用名称
            $('.m_edit').on('input propertychange', '.name', function () {
                $('.m_name').text($(this).val())
            })

            //显示用户头像和昵称
            var userObj = parent.getLocalStorage('JSXM');
            $('.m_author_photo img').attr('src', userObj.userPhoto);
            $('.m_author_name p').text(userObj.userName);

            //全屏功能
            $('.totalIn').click(function () {
                $(this).hide();
                $('.totalOut').show();
                $('body').css('overflow', 'hidden');
                //获取当前屏幕的宽高
                var w = $(window).width();
                var h = $(window).height();
                //父级宽度100%
                $('.m').css({ 'width': '100%', 'margin-top': 0 });
                $('#m_cover_app').width(w).height(h).css('z-index', 1);
            })
            $('.totalOut').click(function () {
                $(this).hide();
                $('.totalIn').show();
                $('body').css('overflow-y', 'auto');
                //父级宽度100%
                $('.m').css({ 'width': '80%', 'margin-top': '20px' });
                $('#m_cover_app').width('100%').height('600px');
            })

            $('.screenshot').click(function () {
                parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                    $('.m_c img').attr('src', base64);
                    imgBlob = blob
                });
            })
            //上传封面触发事件
            $('.m_c_upload').click(function () {
                parent.screenshots($('#cesiumIfm').contents().find('#cesiumContainer')[0], function (base64, blob) {
                    $('.m_c img').attr('src', base64);
                    imgBlob = blob
                });
            });

            //发布应用
            $('.release').click(function () {
                parent.sysPopupf('发布设置', parent.$('#fbLevel'), 400, 360, null, ['发布', '取消'], function (index, layero) {
                    if (parent.getLocalStorage('JSXM') && parent.getLocalStorage('JSXM').id) {
                        var content = {
                            "categories": "",
                            "creator": parent.getLocalStorage('JSXM').id,
                            "desc": $('.desc').val(),
                            "logo": $('.logo').attr('src'),
                            "menuTemplateId": parseInt($('select[name=funcdata]').val()),
                            "name": $('.name').val(),
                            "projectTemplateId": parseInt($('select[name=engindata]').val()),
                            "status": 0,
                            "title": $('.mod_title').val(),
                            "titlebackground": ""
                        }

                        //判断有没有上传图片
                        if (!imgBlob) {
                            content.img = $('.m_c img').attr('src');
                            var obj = $.extend({ "content": JSON.stringify(content) }, {
                                'objid': id || 0,
                                "openness": parent.openness,
                                "openstaff": '',
                                "opengroup": '',
                                'shuserid': parent.getLocalStorage('JSXM').id,
                                "shstatus": 0
                            })
                            parent.ajaxPost(parent.defaultUrl + '/app/insertCheckStatus', obj, function (data) {
                                if (data.code === 200) {
                                    parent.layer.msg('发布成功，等待审核');
                                } else if (data.message) {
                                    parent.layer.msg(data.message)
                                }
                            })
                        } else {
                            //调用上传接口
                            var formdata = new FormData();
                            formdata.append("file", imgBlob);
                            parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                                if (data.code === 200) {
                                    content.img = data.data;
                                    var obj = $.extend({ "content": JSON.stringify(content) }, {
                                        'objid': id || 0,
                                        "openness": parent.openness,
                                        "openstaff": '',
                                        'shuserid': parent.getLocalStorage('JSXM').id,
                                        "shstatus": 0
                                    })
                                    parent.ajaxPost(parent.defaultUrl + '/app/insertCheckStatus', obj, function (data) {
                                        if (data.code === 200) {
                                            parent.layer.msg('发布成功，等待审核');
                                        } else if (data.message) {
                                            parent.layer.msg(data.message)
                                        }
                                    })
                                }
                            })
                        }

                    }
                    parent.layer.close(index)
                })
            })

            //保存应用
            $('.save').click(function () {
                //判断是新增还是更新
                if (id) {
                    dataFn(parent.defaultUrl + '/app/updateApp', {
                        "id": id,
                        "categories": "",
                        "creator": parent.getLocalStorage('JSXM').id,
                        "desc": $('.desc').val(),
                        "logo": $('.logo').attr('src'),
                        "menuTemplateId": parseInt($('select[name=funcdata]').val()),
                        "name": $('.name').val(),
                        "projectTemplateId": parseInt($('select[name=engindata]').val()),
                        "status": 2,
                        "title": $('.mod_title').val(),
                        "titlebackground": ""
                    })

                } else {
                    dataFn(parent.defaultUrl + '/app/insertApp', {
                        "categories": "",
                        "creator": parent.getLocalStorage('JSXM').id,
                        "desc": $('.desc').val(),
                        "logo": $('.logo').attr('src'),
                        "menuTemplateId": parseInt($('select[name=funcdata]').val()),
                        "name": $('.name').val(),
                        "projectTemplateId": parseInt($('select[name=engindata]').val()),
                        "status": 2,
                        "title": $('.mod_title').val(),
                        "titlebackground": ""
                    })
                }
            })
        })

        //数据的保存和发布
        var imgBlob = null;
        function dataFn(url, obj) {
            //判断是否有上传图片
            if (!imgBlob) {
                obj.img = $('.m_c img').attr('src');
                upApp(url, obj);
            } else {
                //调用上传接口
                var formdata = new FormData();
                formdata.append("file", imgBlob);
                parent.ajaxFile(parent.defaultUrl + '/file/imgs', formdata, function (data) {
                    if (data.code === 200) {
                        obj.img = data.data;
                        upApp(url, obj);
                    }
                })
            }
        }

        //调用更新数据接口
        function upApp(url, obj) {
            //调用更新数据接口
            parent.ajaxPost(url, obj, function (data) {
                if (data.code === 200) {
                    layer.msg('更新成功');
                    id = data.id ? data.id : id;
                } else if (data.message) {
                    layer.msg(data.message)
                }
            })
        }

        //获取工程模板数据
        function getEnginData(id) {
            parent.ajaxGet(parent.defaultUrl + '/template/selTemplateById',
                { 'id': id }
                , function (data) {
                    if (data.code === 200) {
                        //工程树数据转化
                        $cesuimWin.treeInit(data.data.projectTree);
                        //球初始化定位
                        cesuim_posi = data.data.position ? JSON.parse(data.data.position) : '';
                        if (cesuim_posi) {
                            //判断获取的数据中是否有属性值为空
                            var flag = false;
                            for (key in cesuim_posi) {
                                if (cesuim_posi[key] === '') {
                                    flag = true;
                                    break;
                                }
                            }
                            form.val('mEdit', cesuim_posi);
                            if (!flag) {
                                $cesuimWin.flyPosi(cesuim_posi);
                            }
                        }
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
        }

        //获取功能模板数据
        function getFuncData(id) {
            parent.ajaxGet(parent.defaultUrl + '/template/selTemplateById',
                { 'id': id }
                , function (data) {
                    if (data.code === 200) {
                        data.data.menus ? $cesuimWin.setFuncNav(JSON.parse(data.data.menus)) : '';
                        data.data.tools ? $cesuimWin.setToolNav(JSON.parse(data.data.tools)) : '';
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
        }
    </script>
</body>

</html>